<template>
    <CommonPage ref="userRef" :tableConfig="option" formKey="role"></CommonPage>
    <RoleAddUpdate v-if="dialog" v-model="dialog" :type="openType" :info="rowInfo" @callback="userRef.resetTableData()"/>
</template>
<script setup>
import CommonPage from '@/components/CommonPage/index.vue'
import RoleAddUpdate from './components/roleAddUpdate.vue'
import {deleteRolle} from '@/server/manage/sys.js'
import { reactive, ref } from 'vue';
import {ElMessageBox, ElMessage} from 'element-plus'
const dialog = ref(false)
const openType = ref()
const rowInfo = ref()
const userRef = ref()
const option = reactive({
    operationWidth: 200,
    formItems: [
        {label: '角色名称', prop: 'roleName', type: 'input', show: true}
    ],
    buttons: [
        {label: "新增", icon: 'Plus', auth: '', handle: (event)=> {handleOpen('add')}},
        {label: "删除", icon: 'Delete', type: 'danger', handle: (event) => handleDel(event)},
    ],
    options: [
        {label: '修改', handle: (event) => {handleOpen('edit', event)}, isShow:() => {return true}},
        {label: '删除', handle: (event) => handleDel(event), isShow:() => {return true}, type: 'danger'}
    ]
})
// 新增 编辑
const handleOpen = (type, item) => {
    openType.value = type
    item && (rowInfo.value = item)
    dialog.value = true
}
// 删除
const handleDel = (list) => {
    let ids = Array.isArray(list) ? list.map(item => item.roleId) : [list.roleId]
    ElMessageBox.confirm('您确定删除吗？','提示',
        {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}
    ).then(() => {
        deleteRolle(ids).then(res => {
            ElMessage({ type: 'success', message: '删除成功！'})
            userRef.value.resetTableData()
        })
    })
    .catch()
}

</script>